{% extends "base/index.html" %}

{% block center %}
    <!--用户信息-->
    <div class="panel panel-default center-top" style="min-width:auto;">
        <div class="panel-heading">
            <div class="row" style="padding-top:5px;padding-left:10px;">
                <div class="col-sm-6">
                    <a href="" class="btn btn-sm btn-success" data-toggle="modal" data-target="#dictModal">添加</a>
                </div>
            </div>
        </div>
        <div class="panel-body">
            <table class="table table-hover">
                <thead>
                <tr style="background-color: #f5f5f5;">
                    <th>ID</th>
                    <th>键</th>
                    <th>值</th>
                    <th>备注</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {% for i in data_list %}
                    <tr name="tbody">
                        <td style="padding-top: 20px;">{{ i.id }}</td>
                        <td style="padding-top: 20px;">{{ i.dict_key }}</td>
                        <td style="padding-top: 20px;">{{ i.dict_val }}</td>
                        <td style="padding-top: 20px;">{{ i.dict_msg }}</td>
                        <td style="padding-top: 20px;">
                            <a href="javascript:;" name="edit-dict" dict_id="{{ i.id }}" style="text-decoration:none;"
                               data-toggle="tooltip" data-placement="left" title="修改"><span class="fa fa-pencil"></span>
                            </a>&nbsp;&nbsp;&nbsp;&nbsp;
                            <a href="javascript:;" name="del-dict" dict_id="{{ i.id }}" style="text-decoration:none;"
                               data-toggle="tooltip" data-placement="right" title="删除"><span class="fa fa-trash"></span>
                            </a>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            <div class="text-right" style="margin-top:-30px;padding-right:9%">
                <ul class="pagination" id="pager">
                    <li class="previous"><a href="/rbac/dict/1/">首页</a></li>
                    {#上一页按钮开始#}
                    {# 如果当前页有上一页#}
                    {% if data_list.has_previous %}
                        {#  当前页的上一页按钮正常使用#}
                        <li class="previous"><a href="/rbac/dict/{{ data_list.previous_page_number }}/">上一页</a></li>
                    {% else %}
                        {# 当前页的不存在上一页时,上一页的按钮不可用#}
                        <li class="previous disabled"><a href="javascript:;">上一页</a></li>
                    {% endif %}
                    {#上一页按钮结束#}
                    {# 页码开始#}
                    {% for num in page_list %}
                        {% if num == currentPage %}
                            <li class="item active"><a href="/rbac/dict/{{ num }}/">{{ num }}</a></li>
                        {% else %}
                            <li class="item"><a href="/rbac/dict/{{ num }}/">{{ num }}</a></li>
                        {% endif %}
                    {% endfor %}
                    {#页码结束#}
                    {# 下一页按钮开始#}
                    {% if data_list.has_next %}
                        <li class="next"><a href="/rbac/dict/{{ data_list.next_page_number }}/">下一页</a></li>
                    {% else %}
                        <li class="next disabled"><a href="javascript:;">下一页</a></li>
                    {% endif %}
                    <li class="previous"><a href="/rbac/dict/{{ page_nums }}/">尾页</a></li>
                    {# 下一页按钮结束#}
                </ul>
            </div>

        </div>
    </div>

{% endblock %}

<!-- Modal -->
{% block modal %}

    <!--添加用户-->
    <div class="modal fade" id="dictModal" tabindex="-1" role="dialog" aria-labelledby="dictModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="margin-top:135px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="dictModalLabel">添加字典</h4>
                </div>
                <div class="modal-body">

                    <div class="form-group">
                        <span style="color: red">*</span><label>键</label>
                        <input class="form-control" placeholder="键" id="dict-key">
                    </div>
                    <div class="form-group">
                        <span style="color: red">*</span><label>值</label>
                        <input class="form-control" placeholder="值" id="dict-val">
                    </div>
                    <div class="form-group">
                        <label>备注</label>
                        <input class="form-control" placeholder="备注" id="dict-msg">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="sub-dict">提交</button>
                </div>
            </div>
        </div>
    </div>


    <!--修改用户信息-->
    <div class="modal fade" id="edit-dictModal" tabindex="-1" role="dialog" aria-labelledby="edit-dictModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="margin-top:135px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="edit-dictModalLabel">修改字典</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <span style="color: red">*</span><label>键</label>
                        <input class="form-control" placeholder="用户名" id="edit-dict-key">
                    </div>
                    <div class="form-group">
                        <span style="color: red">*</span><label>值</label>
                        <input class="form-control" placeholder="姓名" id="edit-dict-val">
                    </div>
                    <div class="form-group">
                        <label>值</label>
                        <input class="form-control" placeholder="姓名" id="edit-dict-msg">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="sub-edit-dict">提交</button>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block js %}

    <script type="text/javascript" src="/static/mystyle/js/rbac.js"></script>

{% endblock %}